<!--
 * @Descripttion: 
 * @version: 
 * @Author: Boyin
 * @Date: 2024-11-27
 * @LastEditors: Boyin
 * @LastEditTime: 2024-11-27
-->
<template>
  <div>
    <div>
      <!-- 查询日志2 -->
      <!-- <span :class="mydtcss">改变</span> -->
      <div class="mains">
        <!-- 输入实现 -->
        <a-form-model ref="subdataForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <a-row>
            <a-col>
              <!-- 输入框 -->
              <a-form-model-item label="输入（区块ID）关键字查询：" prop="inquerydata" has-feedback>
                <!-- 注  v-model绑定rule的规则 -->
                <a-input placeholder="query for?" type="text" v-model="ruleForm.inquerydata" allow-clear
                  @keyup.enter="submitForm('subdataForm')" />
              </a-form-model-item>
            </a-col>
          </a-row>

          <!-- 提交按钮 -->
          <a-form-model-item class="querybutton">
            <a-button type="primary" @click="submitForm('subdataForm')">
              查询
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <!-- <p class="clearfloat"></p> -->
      </div>
      <a-divider style="color:#d0d0d0">查询结果</a-divider>
      <!-- 查询结果 -->
      <!-- 查询前、成功、进行时、失败出现对应的div -->
      <!-- 查询之前/查询失败 -->
      <!-- <a-result v-show="!isresult&!isspin" title="请查询日志信息" style="height:200px;margin:50px 0">
          <template #icon>
              <a-icon type="smile" theme="twoTone" />
              </template>
      </a-result> -->
      <!-- 查询中 -->
      <div class="spin-large" v-show="!isresult&isspin">
        <a-spin size="large" />
      </div>
      <!-- 查询成功 -->
      <div class="res-peripheral" style="height:450px" v-show="isresult&!isspin">
        <div class="res-endogenous" style="padding:50px 0;">
          <div style="position:absolute;margin:0 0 40px 0">
            <h1
              style="textAlign:center; font-size:24px;font-family:PingFang-SC-Heavy,PingFang-SC;font-weight: 800;color:#3f5ecf;line-height:26px">
              查询结果</h1>
          </div>
          <div class="div-info-detail">
            <span class="info-detail-label" style="width:50%;textAlign:center">日志名称：</span>
            <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.name}}</span>
          </div>
          <div class="div-info-detail">
            <span class="info-detail-label" style="width:50%;textAlign:center">日志信息：</span>
            <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.message}}</span>
          </div>
          <div class="div-info-detail">
            <span class="info-detail-label" style="width:50%;textAlign:center">存证时间：</span>
            <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.time}}</span>
          </div>
          <div class="div-info-detail">
            <span class="info-detail-label" style="width:50%;textAlign:center">哈希值：</span>
            <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.hash}}</span>
          </div>
          <div class="div-info-detail">
            <span class="info-detail-label" style="width:50%;textAlign:center">IP：</span>
            <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.ip}}</span>
          </div>
          <div class="div-info-detail">
              <span class="info-detail-label" style="width:50%;textAlign:center">是否被篡改：</span>
              <span class="info-detail-value" style="width:50%;textAlign:center">{{queryObj.is_changed}}</span>
            </div>
        </div>
      </div>
    </div>
    <!-- 详情展示界面 -->
    <a-drawer title="详情展示" destroyOnClose width="500px" placement="left" :visible="isDrawerShow"
      @close="isDrawerShow=false">
      <a-list item-layout="horizontal" :data-source="currDrawerShowform">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-list-item-meta :description="item.value">
            <a slot="title" href="">{{item.title}}</a>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-drawer>
    <!-- 开始取证按钮 -->
    <!-- <a-button type="primary" @click="startForensics" style="margin: 10px;">
      开始取证
    </a-button> -->
    <!-- 表格 -->
    <a-table :columns="columns" rowKey="hash" :data-source="datalt" :customHeaderRow="customHeaderRow"
      :customRow="customRow" bordered>
      <template slot="opration1" slot-scope="text,record">
        <a-button type="link" size="small" href="javascript:;" @click="getDetial(record,text)" style="color:red">详情
        </a-button>
      </template>
      <template slot="verification" slot-scope="text,record">
        <a-button type="link" size="small" href="javascript:;" @click="verify(record,text)" style="color:red">验证
        </a-button>
      </template>
      <template slot="opration2" slot-scope="text,record">
        <a-button type="link" size="small" href="javascript:;" @click="postDownload(record,text)" style="color:red">内存文件
        </a-button>
      </template>
    </a-table>
  </div>
</template>
<script>
  import axios from 'axios';
  import { parseTime } from '@/utils/date.js';
  import { getCertificateNumber } from '@/utils/getcertificatenumber.js';

  const columns = [
    {
      title: '区块ID',
      sorter: false,
      sortField: 'ID',
      dataIndex: 'ID',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'ID' },
    },
    {
      title: '总内存大小(KB)',
      sorter: false,
      sortField: 'mem_total',
      dataIndex: 'mem_total',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'mem_total' },
    },
    {
      title: '使用内存大小(KB)',
      sorter: false,
      sortField: 'mem_used',
      dataIndex: 'mem_used',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'mem_used' },
    },
    {
      title: '空闲内存大小(KB)',
      sorter: false,
      sortField: 'mem_free',
      dataIndex: 'mem_free',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'mem_free' },
    },
    {
      title: '共享内存大小(KB)',
      sorter: false,
      sortField: 'mem_shared',
      dataIndex: 'mem_shared',
      width: 1 / 8,
      ellipsis: true,
      scopedSlots: { customRender: 'mem_shared' },
    },
    {
      title: '缓存大小(KB)',
      sorter: false,
      sortField: 'mem_buff_cache',
      dataIndex: 'mem_buff_cache',
      width: 1 / 7,
      ellipsis: true,
      scopedSlots: { customRender: 'mem_buff_cache' },
    },
    // {
    //   title: 'MEM AVAILABLE',
    // sorter: false,
    // sortField: '',//   
    // dataIndex: 'mem_available',
    //   width: 1 / 11,
    //   ellipsis: true,
    //   scopedSlots:{ customRender: 'mem_available' },
    // },
    // {
    //   title: 'SWAP TOTAL',
    // sorter: false,
    // sortField: '',//   
    // dataIndex: 'swap_total',
    //   width: 1 / 11,
    //   ellipsis: true,
    //   scopedSlots:{ customRender: 'swap_total' },
    // },
    // {
    //   title: 'SWAP USED',
    // sorter: false,
    // sortField: '',//   
    // dataIndex: 'swap_used',
    //   width: 1 / 11,
    //   ellipsis: true,
    //   scopedSlots:{ customRender: 'swap_used' },
    // },
    // {
    //   title: 'SWAP FREE',
    // sorter: false,
    // sortField: '',//   
    // dataIndex: 'swap_free',
    //   width: 1 / 11,
    //   ellipsis: true,
    //   scopedSlots:{ customRender: 'swap_free' },
    // },

    {
      title: '取证源证书号',
      sorter: false,
      sortField: 'certificate_number',
      dataIndex: 'certificate_number',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'certificate_number' },
    },
    {
      title: '开始取证时间',
      sorter: (a, b) => {
        let aTime = new Date(a.start_time).getTime()
        let bTime = new Date(b.start_time).getTime()
        return aTime - bTime
      },
      sortField: 'start_time',
      sortDirections: ['descend', 'ascend', 'descend'],
      // 配置默认是倒序
      defaultSortOrder: 'descend',
      dataIndex: 'start_time',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'start_time' },
    },
    // {
    //   title: '结束取证时间',
    // sorter: false,
    // sortField: '',//   
    // dataIndex: 'last_time',
    //   width: 1 / 12,
    //   ellipsis: true,
    //   scopedSlots: { customRender: 'last_time' },
    // },
    {
      title: '取证用户',
      sorter: false,
      sortField: 'forensices_user',
      dataIndex: 'forensices_user',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'forensices_user' },
    },
    {
      title: '上链哈希值',
      sorter: false,
      sortField: 'hash',
      dataIndex: 'hash',
      width: 1 / 10,
      ellipsis: true,
      scopedSlots: { customRender: 'hash' },
    },
    {
      title: '详情',
      sorter: false,
      sortField: '',
      dataIndex: '',
      key: 'detail',
      width: '6%',
      scopedSlots: { customRender: 'opration1' }
    },
    // {
    //   title: '完整性验证',
    //   sorter: false,
    //   sortField: '',
    //   dataIndex: '',
    //   key: 'verification',
    //   width: '8%',
    //   scopedSlots: { customRender: 'verification' }
    // },
    {
      title: '内存文件',
      sorter: false,
      sortField: '',
      dataIndex: '',
      key: 'download',
      width: '8%',
      scopedSlots: { customRender: 'opration2' }
    },
  ];

  const data = [];

  // 生成100000-999999 的随机数
  // function GetRandomNum(Min,Max) {
  //   var Range = Max - Min;
  //   var Rand = Math.random();
  //   return(Min + Math.round(Rand * Range));
  // }

  // for (let i = 0; i < 100; i++) {
  //   data.push({
  //     key: i.toString(),
  //     name: GetRandomNum(100000,999999)+'000000000',
  //     age: '192.168'+'.'+GetRandomNum(10,255)+'.'+GetRandomNum(10,255),
  //     address: '2023.02.'+GetRandomNum(10,27),
  //   });
  // }
  // data[0].name = 613808+'000000000';
  // data[0].age = '192.168'+'.10.16';
  // data[0].address = '2023.03.02';
  // data[1].name = '5967860000000';
  // data[1].age = '192.168.10.1';
  // data[1].address = '2023.03.02';
  // data[2].name = 122595+'000000000';
  // data[2].age = '192.168.11.16';
  // data[2].address = '2023.03.02';
  export default {
    data() {
      this.cacheData = data.map(item => ({ ...item }));
      return {
        isDrawerShow: false,
        currDrawerShowform: [],
        searchName: '',
        loading: false,
        queryLists: [],
        ruleForm: {},
        rules: {
          inquerydata: [
            {
              required: true,
              min: 0,
              max: 30,
              message: "查询数据不能为空",
              trigger: "change",
            },
          ],
        },
        queryObj: {
          // namef: '',
          // messagef: '',
          // timef: '',
          // hash: '',
          // user: ''
        },
        isspin: false,
        isresult: false,
        layout: {},

        data,
        datalt: data,
        columns: columns,
        querydata: [],
        editingKey: '',
      };
    },
    mounted() {
      this.getMemuseForensicsData();
    },
    methods: {
      async getMemuseForensicsData() {
        const resData = await axios({
          methods: 'get',
          url: '/apilog/queryAllAttack'
        }).then((res) => {
          res.data.result.forEach((item) => {
            item.last_time = parseTime(item.last_time);
            item.start_time = parseTime(item.start_time);
            item.certificate_number = getCertificateNumber(item.certificate_number);
          })
          console.log("res:", res);
          this.data = res.data.result;
          console.log(this.data);
          this.datalt = this.data;
          this.querydata = this.data;
          console.log(this.datalt);
        });
      },
      //开始取证按钮
      async startForensics() {
        const resData = await axios({
          method: 'post',
          url: '/apilog/createInfo',
          data: {
            "uuid": "10086",
            "info": {
              "start_time": "1421927414",
              "last_time": "1421927416",
              "attack_category": "Reconnaissance",
              "attack_subcategory": "HTTP",
              "protocol": "tcp",
              "source_IP": "175.45.176.0",
              "source_port": "13284",
              "destination_IP": "149.171.126.16",
              "destination_port": "80",
              "attack_name": "Domino Web Server Database Access: /doladmin.nsf (https://strikecenter.bpointsys.com/bps/strikes/recon/http/domino/access_domino_doladmin_nsf.xml)",
              "attack_reference": "-"
            }
          }
        }).then((res) => {
          console.log("start_forensics_res:", res);
        });
      },
      //提交查询按钮
      submitForm() {
        if (this.ruleForm.inquerydata && this.ruleForm.inquerydata !== '') {
          this.datalt = this.querydata.filter(
            (p) => {
              console.log(this.querydata)
              return p['ID'] == this.ruleForm.inquerydata;
            }
          )
          console.log(this.ruleForm);
        } else {
          this.datalt = this.data
        }
      },
      getDetial(record, index) {
        console.log("record!!!:", record);
        this.currDrawerShowform = []
        for (let key in record) {
          let obj = {
            "title": '',
            "value": '',
          };
          obj.title = key;
          this.columns.forEach(item => {
            //console.log("item:", item)
            if (item.dataIndex === key) {
              //console.log("item.dataIndex", item.dataIndex)
              obj.title = item.title
            }
          })
          //obj.title = key;
          obj.value = record[key];
          this.currDrawerShowform.push(obj);
        }
        this.isDrawerShow = true;
      },
      verify(record, index) {
        console.log("record!!!:", record);
        this.currDrawerShowform = []
        for (let key in record) {
          let obj = {
            "title": '',
            "value": '',
          };
          obj.title = key;
          this.columns.forEach(item => {
            //console.log("item:", item)
            if (item.dataIndex === key) {
              //console.log("item.dataIndex", item.dataIndex)
              obj.title = item.title
            }
          })
          //obj.title = key;
          obj.value = record[key];
          this.currDrawerShowform.push(obj);
          this.isDrawerShow = false;
        }
        console.log(this.currDrawerShowform);
        var transit = {
          "ID": this.currDrawerShowform[9].value,
          "hash": this.currDrawerShowform[16].value
        };
        // var ID = this.currDrawerShowform[3].value;
        this.$router.push({ path: '/tree', query: { transit: transit } });
      },
      /*下载路由表文件操作 */
      postDownload(record, text) {
        let memoryId = Math.floor(Math.random() * 16) + 1;
        let url = "http://10.3.242.162:10081/memory/" + memoryId + "/memory/";
        window.location.href = url;
      },
      /* 修改table样式 */
      customHeaderRow(column) {
        column.forEach((item, index) => {
          column[index].className = 'customHeaderRowClass'
        })
      },
      customRow(record) {
        return {
          style: {
            'color': '#91D5FF'
          }
        }
      }, 
    }
  }
</script>
<style scoped>
  .mains {
    width: 100%;
    height: 180px;
    /* 块级元素居中 */
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #e6f7ff;
    border-radius: 10px;
    background-color: #fafafa;
  }

  .clearfloat {
    clear: both;
    height: 0;
  }

  .querybutton {
    float: right;
  }

  .dongtaicss {
    background-color: #abee;
  }

  .dongtaicss_change {
    background-color: #eea;
  }

  .div-info-detail {
    margin: 27px 0 0 0;
  }

  /* result */
  .res-peripheral {
    /* 绝对定位s1 */
    /* height: 580px; */
    position: relative;
    /* border:1px solid sienna; */
    background-color: #F8FCFF;
    border-radius: 5px;
    /*四周都有阴影 0px 0px  8px 0px */
    /*靠右靠下有阴影 5px 2px 6px */
    box-shadow: 2px 2px 3px #d0d0d0;
  }

  .res-endogenous {
    /* 绝对定位s2 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* 绝对定位over */
    width: 580px;
    /* height: 560px; */
    border-radius: 20px;
  }

  .info-detail-label {
    display: inline-block;
    font-size: 16px;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #3f5ecf;
    line-height: 26px;
    text-shadow: 0px 2px 4px rgb(192 192 192 / 50%);
  }

  .info-detail-value {
    display: inline-block;
    width: 65%;
    vertical-align: top;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    line-height: 26px;
    /* 自动换行 */
    word-break: break-all;
  }

  .spin-large {
    textAlign: center;
    /* background: rgba(0, 0, 0, 0.05); */
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }

  .editable-row-operations a {
    margin-right: 8px;
  }

  /deep/.customHeaderRowClass {
    background-color: #1890FF !important;
    color: #fff !important;
  }
</style>